<template>
  <div ref="order" class="order">
    订单退单部分
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {

    }
  },
  computed: {

  },
  created() {

  },
  mounted() {
    var myChart = echarts.init(this.$refs.order, 'dark')
    // 绘制图表
    var option = {
      // 标题
      title: {
        text: '订单退单柱状图',
        left: 20,
        top: 20,
        textStyle: {
          color: '#9aa8d4',
          fontSize: 30
        }
      },
      // 提示框
      tooltip: {
        backgroundColor: 'red'
      },
      legend: {
        left: 'center',
        bottom: 0
      },
      // x轴
      xAxis: {
        data: [],
        axisLabel: {
          rotate: 90
        }
      },
      // y轴
      yAxis: {},
      series: [
        {
          name: '订单',
          type: 'bar',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#7e05e3' // 0% 处的颜色
              }, {
                offset: 1, color: '#bc04e2' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          data: []
        },
        {
          name: '退单',
          type: 'bar',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#24cbff' // 0% 处的颜色
              }, {
                offset: 1, color: '#2492ff' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          data: []
        }
      ]
    }
    for (var i = 0; i < 30; i++) {
      var number = Math.ceil(Math.random() * 100 + 1)
      option.series[0].data.push(number)
      option.series[1].data.push(Math.ceil(Math.random() * 100 + 1))
      option.xAxis.data.push(`day${i + 1}`)
    }
    myChart.setOption(option)
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
.order{
  width: 100%;
  height: 100%;
}
</style>
